﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>展开收起的脚本和样式</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        /*包含隐藏层的整个容器,背景颜色覆盖了padding区域*/
        #panel
        {
            background: #e8e8e8;
            width: 600px;
            display: block;
            margin: 0 auto;
            padding: 5px;
            font-size: 9pt;
            height: auto; 
        }
        /*切换层*/
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px blue;
            margin: 0 auto;
        }
        /*切换按钮*/
        .btn-slide
        {
            background: blue;
            text-align: center;
            width: 120px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        function showdiv() {
            document.getElementById("hide-panel").style.display = "block";
            document.getElementById("trigger").href = "javascript:hidediv();";
            document.getElementById("trigger").innerHTML = "收起-";
        }
        function hidediv() {
            document.getElementById("hide-panel").style.display = "none";
            document.getElementById("trigger").href = "javascript:showdiv();";
            document.getElementById("trigger").innerHTML = "更多选项+";
        }
    </script>
</head>
<body>
    <div>
        <div id="panel">
            <p>手机 - 商品筛选</p>
            <p>网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G(WCDMA)</p>
            <div id="hide-panel" style="display: none">
              <p>价格： 5000以上 4000-4999 3000-3999 2000-2999</p>
              <p>特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏</p>
            </div>
        </div>
        <p class="slide">
            <a href="javascript:showdiv();"  id="trigger" class="btn-slide">更多选项+</a>
        </p>
    </div>
    <!--在html中<a> 标签表示 是一个超链接 
        1一般作用是作为超链接的跳转页面 需要设置跳转的页面就是 在href属性中设置的跳转地址
        2.可以作为一个点击按钮使用，但是不跳转到其它页面而是做其他处理，这时候就需要设置href 属性为javascript:
    -->
</body>
</html>
